<template>
	<m-layout title="收款方式" gap="0 24">
		<!-- 支付宝账号 -->
		<!-- <m-block gap="0 30" spa="24 0" bgColor="linear-gradient(190deg, #304FFF 0%, #304FFF 100%)">
			<view class="flex alipayaccount" @click="select(3)">
				<view class="left flex jc-center mr-36">
					<m-icon size="50" type="icon-zhifubao1" color="#304FFF"></m-icon>
				</view>
				<view class="flex-1 flex-between text-white" v-if="alipayaccount1">
					<view class="flex-column text-white">
						<text class="fs26">支付宝账号</text>
						<text class="fs33 mt-12 ">{{alipayaccount1.idcard}}</text>
					</view>
					<view class="mt-60" @click.stop="resetFn(3)">
						<m-icon size="36" color="#FFF" type="icon-bianji"></m-icon>
					</view>
				</view>
				<view v-else class=" flex-1 flex text-white ">
					<m-icon type="icon-jiahao1" size="30" color="#fff"></m-icon>
					<text class="ml-20 fs28">绑定支付宝账号</text>
				</view>
			</view>
			<text class="backTag">个人支付宝</text>
		</m-block> -->
		<!-- <m-block gap="0 30" spa="24 0" bgColor="linear-gradient(190deg, #304FFF 0%, #304FFF 100%)">
			<view class="flex alipayaccount" @click="select(4)">
				<view class="left flex jc-center mr-36">
					<m-icon size="50" type="icon-zhifubao1" color="#304FFF"></m-icon>
				</view>
				<view class="flex-1 flex-between text-white" v-if="alipayaccount2">
					<view class="flex-column">
						<text class="fs26">支付宝账号</text>
						<text class="fs33 mt-12 ">{{alipayaccount2.idcard}}</text>
					</view>
					<view class="mt-60" @click.stop="resetFn(4)">
						<m-icon size="36" color="#FFF" type="icon-bianji"></m-icon>
					</view>
				</view>
				<view v-else class=" flex-1 flex text-white ">
					<m-icon type="icon-jiahao1" size="30" color="#fff"></m-icon>
					<text class="ml-20 fs28">绑定支付宝账号</text>
				</view>
			</view>
			<text class="backTag">企业支付宝</text>
		</m-block> -->
		<!-- 银行卡 -->
		<m-block gap="0 30" spa="24 0" bgColor="linear-gradient(190deg, #304FFF 0%, #304FFF 100%)">
			<view class="flex alipayaccount" @click="select(1)">
				<view class="left flex jc-center mr-36">
					<m-icon size="46" type="icon-yinhangqia1" color="#304FFF"></m-icon>
				</view>
				<view class="flex-1 flex-between text-white" v-if="backSelf&&backSelf.username">
					<view class="flex-column flex-1">
						<text class="fs26">{{backSelf.bankname}}</text>
						<text class="fs33 mt-12 ">{{backSelf.idcard|nikeName}}</text>
					</view>
					<view class="mt-60" @click.stop="Jump('/pages/wallet/bankCard/bankCard?&cardtype=1&type=2')">
						<m-icon size="36" color="#FFF" type="icon-bianji"></m-icon>
					</view>
				</view>
				<view v-else class=" flex-1 flex text-white"
					@click.stop="Jump('/pages/wallet/bankCard/bankCard?&cardtype=1&type=1')">
					<m-icon type="icon-jiahao1" size="30" color="#fff"></m-icon>
					<text class="ml-20 fs28">绑定银行卡</text>
				</view>
			</view>
			<text class="backTag">个人账户</text>
		</m-block>
		<!-- <m-block gap="0 30" spa="24 0" bgColor="linear-gradient(190deg, #304FFF 0%, #304FFF 100%)">
			<view class="flex alipayaccount" @click="select(2)">
				<view class="left flex jc-center mr-36">
					<m-icon size="46" type="icon-yinhangqia1" color="#304FFF"></m-icon>
				</view>
				<view class="flex-1 flex-between text-white" v-if="backPublic&&backPublic.username">
					<view class="flex-column flex-1">
						<text class="fs26">{{backPublic.bankname}}</text>
						<text class="fs33 mt-12 ">{{backPublic.idcard|nikeName}}</text>
					</view>
					<view class="mt-60" @click.stop="Jump('/pages/wallet/bankCard/bankCard?&cardtype=2')">
						<m-icon size="36" color="#FFF" type="icon-bianji"></m-icon>
					</view>
				</view>
				<view v-else class=" flex-1 flex text-white"
					@click.stop="Jump('/pages/wallet/bankCard/bankCard?&cardtype=2')">
					<m-icon type="icon-jiahao1" size="30" color="#fff"></m-icon>
					<text class="ml-20 fs28">绑定银行卡</text>
				</view>
			</view>
			<text class="backTag">对公账户</text>
		</m-block> -->
		<m-dialog :title="`${alipayaccount.id?'修改':'绑定'}${cardtype==3?'个人':'对公'}支付宝账号`" :loading="blindLoading"
			:showCancel="true" :isShow="blindShow" @handleCancel="blindShow = false;blindLoading = false"
			@handleConfirm="BindAlipayaccount">
			<view class="setName-box">
				<!-- <view class="mb-24" v-if="cardtype==3">
					<text class="fs24  text-red">请绑定"{{userinfo.truename}}"名下的支付宝账号</text>
				</view> -->
				<view class="form-Item flex-column mb-24">
					<text class="fs24 mb-12">{{cardtype==3?'个人支付宝姓名':'企业支付宝名称'}}</text>
					<input type="text" :disabled="disabled" v-model="alipayaccount.username" placeholder="请输入支付宝名称">
				</view>
				<view class="form-Item flex-column">
					<text class="fs24 mb-12">支付宝账号</text>
					<input type="text" v-model="alipayaccount.count" placeholder="请输入支付宝账号">
				</view>
				<view class="hint">
					<text>请反复确认支付宝账号</text>
				</view>
			</view>
		</m-dialog>
	</m-layout>
</template>

<script>
	import { mapState } from 'vuex';
	// import { BindAlipayaccount } from '@/api/Users.js'
	import { addEditBank } from '@/api/Users.js'
	export default {
		data() {
			return {
				disabled: false,
				id: 0,
				blindLoading: false,
				blindShow: false,
				cardtype: 0, // 3--个人支付宝   4---- 对公支付宝
				alipayaccount: {
					id: 0,
					count: '',
					username: ''
				}
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
				systemInfo: state => state.general.systemInfo,
				userBackList: state => state.user.userBackList,
				backSelf: state => state.user.backSelf,
				backPublic: state => state.user.backPublic,
			}),
			// 个人账号
			alipayaccount1() {
				return this.userBackList.filter(item => item.cardtype == 3)[0]
			},
			// 对公账号
			alipayaccount2() {
				return this.userBackList.filter(item => item.cardtype == 4)[0]
			}
		},
		onLoad({ id }) {
			this.id = id
		},
		methods: {
			resetFn(id) {
				this.cardtype = id;
				if (id == 3 && this.alipayaccount1) {
					this.alipayaccount.count = this.alipayaccount1.idcard || ''
					this.alipayaccount.id = this.alipayaccount1.id
					this.alipayaccount.username = this.alipayaccount1.username || 0
					this.disabled = true;
				}
				if (id == 4 && this.alipayaccount2) {
					this.alipayaccount.count = this.alipayaccount2.idcard || ''
					this.alipayaccount.id = this.alipayaccount2.id 
					this.alipayaccount.username = this.alipayaccount2.username || 0
					this.disabled = false;
				}
				this.blindShow = true;
			},
			select(id) {
				console.log('id===>', id)
				if (id == 3 || id == 4) {
					this.cardtype = id;
					if (id == 3 && this.alipayaccount1) {
						this.alipayaccount.count = this.alipayaccount1.idcard || ''
						this.alipayaccount.id = this.alipayaccount1.id || 0
						this.alipayaccount.username = this.userinfo.truename
						this.disabled = true;
					}
					if (id == 4 && this.alipayaccount2) {
						this.alipayaccount.count = this.alipayaccount2.idcard || ''
						this.alipayaccount.id = this.alipayaccount2.id || 0
						this.alipayaccount.username = this.alipayaccount2.username || 0
						this.disabled = false;
					}
				}
				if (!Number(this.id)) {
					if (id == 1 || id == 2) return this.Jump(`/pages/wallet/bankCard/bankCard?&cardtype=${id}`)
					if (id == 3 || id == 4) {
						if (id == 3) {
							this.alipayaccount.id =  this.alipayaccount1?this.alipayaccount1.id:0
							this.alipayaccount.username = this.userinfo.truename;
							this.disabled = true;
						}
						if (id == 4) {
							this.alipayaccount.id = this.alipayaccount2?this.alipayaccount2.id :0
							this.alipayaccount.username = '';
							this.disabled = false;
						}
						return this.blindShow = true;
					}
				}
				if (id == 1 && !this.backSelf.bankname) return;
				if (id == 2 && !this.backPublic.bankname) return;
				if (id == 3 && !this.alipayaccount1) {
					this.alipayaccount.username = this.userinfo.truename;
					this.alipayaccount.id =  this.alipayaccount1?this.alipayaccount1.id:0
						this.alipayaccount.count=''
					this.disabled = true;
					return this.blindShow = true;
				}
				if (id == 4 && !this.alipayaccount2) {
					this.alipayaccount.id = this.alipayaccount2?this.alipayaccount2.id :0
					this.alipayaccount.username = "";
					this.alipayaccount.count=''
					this.disabled = false;
					return this.blindShow = true;
				}
				this.$store.commit('user/SET_SELECTEDCARDID', id)
				this.Jump()
			},
			changBlindShow() {
				if (this.userinfo.alipayaccount) {
					this.alipayaccount = this.userinfo.alipayaccount
				}
				this.blindShow = true;
			},
			// 绑定收款方式
			async BindAlipayaccount() {
				if (!this.alipayaccount.count) {
					return this.Toast('请输入支付宝账号')
				}
				this.blindLoading = true;
				const { success, msg } = await addEditBank({
					id: this.alipayaccount.id,
					userid: this.userinfo.userid,
					username: this.cardtype == 3 ? this.userinfo.truename : this.alipayaccount.username,
					idcard: this.alipayaccount.count,
					bankname: this.cardtype == 3 ? this.userinfo.truename : this.alipayaccount.username,
					cardtype: this.cardtype,
				})
				this.Toast(msg)
				this.blindLoading = false;
				this.blindShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.alipayaccount {
		height: 180rpx;
		background-image: url('../../../static/images/pages/mine/stripe.png');
		width: 100%;
		box-sizing: border-box;
		border-radius: 20rpx;
		position: relative;
	}

	.setName-box {
		padding: 24rpx;

		.form-Item {
			background: #fff;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;
				background: #f6f6f6;
			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}

	.left {
		width: 86rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.backTag {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		padding: 12rpx 32rpx;
		color: #FFFFFF;
		background-color: #ff8c2e;
		font-size: 21rpx;
		border-radius: 0rpx 20rpx 0rpx 24rpx;
	}
</style>